<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      border
      @sort-change="sortHandler"
      @selection-change="handleSelectionChange"
      size="small"
    >
      >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form
            label-position="center"
            inline
            class="demo-table-expand"
          >
            <el-form-item label="详细内容">
              <span>{{ props.row.detail }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        prop="type"
        label="系统类型"
        align="center"
        width="155px"
      >
        <template slot-scope="scope">{{ getSystemTypeDisplay(scope.row.type) }}</template>
      </el-table-column>
      <el-table-column
        prop="level"
        label="级别"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">
          <div :style="{color:getLevelColor(scope.row.level)}">{{ getLevelDisplay(scope.row.level) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="appender"
        label="类别"
        align="center"
        width="100px"
      >
        <template slot-scope="scope">{{ getAppenderDisplay(scope.row.appender) }}</template>
      </el-table-column>
      <el-table-column
        prop="message"
        label="内容"
        align="center"
      ></el-table-column>

      <!-- <el-table-column
        prop="detail"
        label="详细内容"
        align="center"
      ></el-table-column> -->
      <el-table-column
        prop="createdAt"
        label="创建时间"
        align="center"
        sortable
        width="155px"
      >
        <template slot-scope="scope">{{ toLocalTime(scope.row.createdAt) }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as moment from 'moment';
import { SortType, MomentFormat } from '../../../constants/common';
import { getSystemTypeDisplay, getLevelDisplay, getAppenderDisplay, getLevelColor } from './service';
import { Message, MessageBox } from 'element-ui';

export default {
  model: {
    prop: 'sort'
  },
  props: {
    sort: {
      type: Object,
      default() {
        return {};
      }
    },
    tableData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      selectedSystemActivityLogIdList: []
    };
  },
  methods: {
    handleSelectionChange(value) {
      this.selectedSystemActivityLogIdList = value.map(item => {
        return item.id;
      });
    },
    sortHandler(data) {
      if (!data.prop || !data.order) return;
      this.sort.sortType = data.order == 'ascending' ? SortType.ASC : SortType.DESC;
      this.$emit('search');
    },
    toLocalTime(ns) {
      return moment(ns).format(MomentFormat);
    },
    getLevelDisplay(level) {
      return getLevelDisplay(level);
    },
    getAppenderDisplay(appender) {
      return getAppenderDisplay(appender);
    },
    getSystemTypeDisplay(type) {
      return getSystemTypeDisplay(type);
    },
    getLevelColor
  }
};
</script>
